import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import {DomeList, MyApp} from './views/btn';
import { MyTable } from "./views/tableList";
// function MyButton() {
//   return (
//     <button>
//       clicke me
//     </button>
//   )
// };

// function AbuoutPage(){
//   return(
//     <>
//     <h1>About</h1>
//     <p>Hello there.<br />How do you do?</p>
//     <img className='avatar' />
//     </>
//   );
// };

function MyButton(){
  const [count, setCount] = useState(0);
};
function handleClick(){
  setCount(count + 1);
};
function App() {
  const user = {
    name: "Hedy Lamarr",
    imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
    imageSize: 90,
  }

  const list = [
    { title: 'Cabbage', isFruit: false, id: 1 },
    { title: 'Garlic', isFruit: false, id: 2 },
    { title: 'Apple', isFruit: true, id: 3 },
  ]

  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }
  // return (
  //   <button onClick={handleClick}>
  //     Clicked {count} times
  //   </button>
  // );
  
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
      <ul>
        {list.map((item, index) => (
          <li key={index}>{item.title}
          </li>
        ))}
      </ul>
      <h1>Counters that update separately</h1>
      <MyApp/>
      <DomeList />
      <MyTable/>
    </>
  )
}




export default App


